<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="revampRoleObj.isShow">
      <div class="modal-ctrl-main odd-row-ctrl">
        <div class="modal-title">
          <p>修改角色信息</p>
        </div>
        <div class="modal-ctrl-content">

          <div class="modal-row">
            <div class="modal-form-key f-l indispensable">
              角色名称：
            </div>
            <input type="text" maxlength="16" placeholder="最长16个字符" v-model="roleParams.name" class="modal-text f-l">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              等级：
            </div>
            <select @change="selectStageCode" :value="roleParams.stageCode">
              <option value="1">市局</option>
              <option value="2">分局</option>
              <option value="3">派出所/警务站</option>
            </select>
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              等级排序：
            </div>
            <input type="text" maxlength="5" v-model="roleParams.pricode" class="modal-text f-l" placeholder="请输入0-10000之间的数字" max="10000" min="0">
          </div>

          <div class="modal-row">
            <div class="modal-form-key f-l">
              备注：
            </div>
            <textarea maxlength="50" placeholder="最长50个字符" v-model="roleParams.remark" class="modal-text f-l"></textarea>
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
          <button type="button" class="btn btn-info" @click="roleAddFn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "RoleRevampModal",
    props:["revampRoleObj","roleId"],
    data(){
      return{
        roleParams:{
          name:"",//角色名称
          stageCode:"1",//等级
          pricode:"",//等级排序
          remark:""//备注
        },
        strongData:"",//储存返回角色名
      }
    },
    watch:{
      revampRoleObj:{
        handler(v1){
          //console.log(v1);
          if( v1.isShow ){//弹窗是否展开
            //console.log(this.roleId);
            this.getRoleAjax();
          }
        },
        deep:true
      }
    },
    methods:{
      //修改角色
      roleAddFn(){


        if( this.verifyForm.isNull(this.roleParams.name) ){
          this.s_alert("角色名称不能为空！");
          // alert("角色名称不能为空！");
          return false;
        }else if( this.verifyForm.isNumber(this.roleParams.pricode)  ){
          this.s_alert("排序等级只能为整数！");
          // alert("等级排序过长");
          return false;
        }

        let roleQueryParmas = {
          "columns": [
            "*"
          ],
          "conditions": [
            {
              "field": "name",
              "symbol": "=",
              "value": this.roleParams.name
            }
          ],
          "dataTypeCode": "userprofile",
          "pageSize": -1,
          "tableName": "T_PRIV_ROLE"
        };
        if( this.roleParams.name === this.strongData ){
          this.upDataSub();
        }else{
          this.$axios.post(this.HOST+"/base/query/page",roleQueryParmas)
            .then(data=> {
              //console.log(data);

              if( data.data.data.list.length > 0 ){
                this.s_alert("该角色名称已经存在！");
                // alert("该角色名称已经存在！");
              }else{
                this.upDataSub();
              }
            })
            .catch(err=>{
              //console.log(err);
            });
        }



        ////console.log(this.roleParams);
      },
      //修改
      upDataSub(){
        let params = {
          "conditions": [
            {
              "field": "id",
              "symbol": "=",
              "value": this.roleId
            }
          ],
          "data": {},
          "dataTypeCode": "userprofile",
          "tableName": "T_PRIV_ROLE"
        };
        for( let roleKey in this.roleParams ){
          params["data"][roleKey] = this.roleParams[roleKey];
        }
        //console.log(params);
        this.$axios["put"](this.HOST+"/base/modify",params)
          .then((data)=>{
            //console.log(data);
            if( data.data.success === true ){
              this.s_alert("修改角色成功！");
              // alert("修改角色成功！");
              this.s_logwrite("基础信息管理-角色管理","修改角色");
              this.closeRoleModal();
            }
          })
          .catch((err)=>{
            this.s_alert("新增角色失败！");
            // alert("新增角色失败！");
            //console.log(err);
          });
      },
      //关闭弹窗
      closeRoleModal(){
        this.clearData();
        this.$emit("closeRoleRevamp");
      },
      //选择等级
      selectStageCode(ele){
        this.roleParams.stageCode = ele.target.value;
      },
      //查询角色信息
      getRoleAjax(){
        let params =  {
          "columns": [],
          "conditions": [
            {
              "field": "ID",
              "symbol": "=",
              "value": this.roleId
            }
          ],
          "dataTypeCode": "userprofile",
          "pageSize": -1,
          "tableName": "T_PRIV_ROLE"
        };
        for( let roleParamsKey in this.roleParams ){
          params["columns"].push(roleParamsKey);
        }
        this.$axios.post(this.HOST+"/base/query/page",params)
          .then((data)=>{
            let successData = data.data.data.list[0];
            this.roleParams.name = successData.NAME;
            this.strongData = successData.NAME;
            this.roleParams.pricode = successData.PRICODE;
            this.roleParams.remark = successData.REMARK;
            this.roleParams.stageCode = successData.STAGECODE;
            //console.log(data);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      clearData(){
        this.roleParams={
          name:"",//角色名称
            stageCode:"1",//等级
            pricode:"",//等级排序
            remark:""//备注
        }
      },
    }
  }
</script>

<style scoped>
  textarea.modal-text {
    min-height: 60px;
    max-height: 60px;
    max-width: 80%;
    min-width: 80%;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
